<template>
  <!-- 通用布局: 只改变内容区域,头部和底部不变 -->
  <div id="user-layout">
    <a-layout style="height: 100vh; ">
      <a-layout-header class="header">
        <!-- a-space间距组件 -->
        <a-space>
          <img class="logo" src="@/assets/my.png" alt="">
          <div class="title">智能AI 答题应用平台</div>
        </a-space>
      </a-layout-header>

      <a-layout-content class="content">
        <router-view v-slot="{ Component }">
            <transition 
              appear name="animate__animated animate__bounce" 
               enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
            >
              <component :is="Component" />
            </transition>
          </router-view>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import 'animate.css'
</script>


<style lang="scss" scoped>
  #user-layout {
    text-align: center;
    background: url('../assets/userBg.jpg')no-repeat;
    background-size: cover;
    // .fade-enter-from {
    //   transform: translateX(20px);
    // }
    // .fade-enter-active {
    //   transition: all linear .3s;
    // }
    // .fade-enter-to {
    //   transform: translateX(0);
    // }
    .title {
      color: #333;
    }
    .logo {
      height: 48px;
      width: auto;
      border-radius: 10px;
      margin-right: 10px;
    } 
    .footer {
      background: #efefef;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover a{
          font-size: 20px;
        }
      a {
        text-decoration: none;
        color: skyblue;
        transition: all linear .3s;
        
      }
    }
    .content {
      margin-bottom: 28px;
      padding: 20px;
    }
    .header {
      margin-top: 15vh;
      font-size: 21px;
    }
  }
</style>